<template>
    <div class="cart">
        <template>
        <el-table
        :data="cartData"
        border
        align="center"
        height="500px"
        style="width: 100%">
         <el-table-column
                            fixed
                            
                            prop="cartId"
                            label="商品Id"
                            width="100">
                          </el-table-column>
                          <el-table-column
                            prop="url"
                            label="商品图片"
                            width="300"
                            height="300">
                            <template slot-scope="scope">
                            <img  :src="cartData[scope.$index].url" alt="">
                            </template>
                          </el-table-column>
                        
                          <el-table-column
                            prop="name"
                            label="商品名"
                            width="300">
                          </el-table-column>

                          <el-table-column
                            prop="price"
                            label="商品单价"
                            width="300">
                             <template slot-scope="scope">
                  <p>{{cartData[scope.$index].price}} 元</p>
                </template>
                          </el-table-column>
               
                          <el-table-column
                            prop="num"
                            label="商品数量"
                            width="200">
                <template slot-scope="scope">
                  <input type="number" min="0"   v-model="cartData[scope.$index].num"    @change="number(scope.$index, cartData)">
                </template>
                          </el-table-column>


                        <el-table-column
                            prop="sum"
                            label="小计"
                            width="200">
              <template slot-scope="scope">
                    <p>{{cartData[scope.$index].sum}}</p>
              </template>
                
            
                </el-table-column>

            <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                  <el-button size="small" type="text"   @click="handClick(scope.$index, cartData)">删除</el-button>
                </template>
        </el-table-column>
        </el-table>
        <div class="sum">总计：{{sumall}}元<el-button size="small" type="success">结算</el-button></div>
        </template>
    </div>
</template>
<style>
.sum{
   margin-left: 80%;

}

</style>

<script>
export default {
    name: 'Cart',
    data(){
        return {
            
 cartData: [{
                        cartId: "",
                        name: '',
                        num: '',
                        price:"",
                        url:"",
                        sum:""

                    }],
        }

    },
    methods:{
        handClick(index,rows) {
              this.$http.get("/deletecart",{
                  params: {
                                id: rows[index].cartId,
                            }

             })
             .then(response => {
                            console.log(response)
                            if (response ) {
                               this.find()

                            } else {
                                alert("删除失败")
                            }

                        })
                        .catch(error => {
                            alert(error)
                        })
        },

        find(){
              this.$http.get("/findcart")
                        .then(response => {
                            console.log(response)
                            if (response != null) {
                                this.cartData = response.data

                            } else {
                                alert("查询购物车 ")
                            }

                        })
                        .catch(error => {
                            alert(error)
                        })

        },
        number(index,rows){
              this.$http.get("/updatecart", {
                  
                            params: {
                                price:rows[index].price,
                                num:rows[index].num,
                                name:rows[index].name
                            }
                        })
                        .then(response => {
                            console.log(response)
                            if (response ) {
                               this.find();

                            } else {
                                alert("查询购物车 ")
                            }

                        })
                        .catch(error => {
                            alert(error)
                        })

        }

    },
    computed:{
sumall(){
    let all=0;
    for(let i=0;i<this.cartData.length;i++){
        all=this.cartData[i].sum+all

    }

    return all;
    
}
    },
    mounted(){
        this.find();
    }
}
</script>